<div class="container-fluid row">
    <!-- <p class="header">
        <span>{{ 'Motion.modeSetting' | translate }}</span>
        <select class="mode-select" disabled>
            <option>{{ 'Motion.normalMode' | translate }}</option>
        </select>
    </p> -->
    <div class="player col-lx-7 col-md-6 mt-1">
        <app-player [option]="playerOption" #player></app-player>
    </div>
    <br>
    <div class="setting col-lx-5 col-md-6 mt-1" [formGroup]="Form">
        <p class="gray-title"><span>{{'paraSetting' | translate}}</span></p>
        <ul>
            <li>
                <label class="introduce">{{ 'Reliability' | translate }}</label>
                <input class="custom-range" type="range" min=0 max=100 step=1 name="iFraction" id="iFraction" formControlName="iFraction" (ngModelChange)="onContentChange($event, 'iFraction')">
                <input class="sensitive-input" type="text" formControlName="iFraction" (ngModelChange)="onContentChange($event, 'iFraction')">
            </li>
            <ng-container *ngIf="iFraction.touched || iFraction.dirty">
                <li *ngIf="iFraction.invalid && iFraction.errors.required">
                    <label class="alarm-tip">{{ 'Reliability' | translate }}{{ 'isRequired' | translate }}</label>
                </li>
                <li *ngIf="iFraction.invalid && iFraction.errors.min">
                    <label class="alarm-tip">{{ 'Reliability' | translate }}{{ 'shouldNotSmallerThan' | translate }}0</label>
                </li>
                <li *ngIf="iFraction.invalid && iFraction.errors.max">
                    <label class="alarm-tip">{{ 'Reliability' | translate }}{{ 'shouldNotBiggerThan' | translate }}100</label>
                </li>
                <li *ngIf="iFraction.invalid && iFraction.errors?.isNumberJudge">
                    <label class="alarm-tip">{{ 'Reliability' | translate }}{{ 'beNumber' | translate }}</label>
                </li>
            </ng-container>
            
            <li class="mt-3">
                <label class="introduce">{{ 'SafetyTimeInterval' | translate }}</label>
                <input class="custom-range" type="range" min=0 max=300 step=1 name="iInterval" id="iInterval" formControlName="iInterval" (ngModelChange)="onContentChange($event, 'iInterval')">
                <input class="sensitive-input" type="text" formControlName="iInterval" (ngModelChange)="onContentChange($event, 'iInterval')">
                <label class="sensitive ml-1">s</label>
            </li>
            <ng-container *ngIf="(iInterval.touched || iInterval.dirty)">
                <li *ngIf="iInterval.invalid && iInterval.errors.required">
                    <label class="alarm-tip">{{ 'SafetyTimeInterval' | translate }}{{ 'isRequired' | translate }}</label>
                </li>
                <li *ngIf="iInterval.invalid && iInterval.errors.min">
                    <label class="alarm-tip">{{ 'SafetyTimeInterval' | translate }}{{ 'shouldNotSmallerThan' | translate }}0</label>
                </li>
                <li *ngIf="iInterval.invalid && iInterval.errors.max">
                    <label class="alarm-tip">{{ 'Reliability' | translate }}{{ 'shouldNotBiggerThan' | translate }}300</label>
                </li>
                <li *ngIf="iInterval.invalid && iInterval.errors?.isNumberJudge">
                    <label class="alarm-tip">{{ 'SafetyTimeInterval' | translate }}{{ 'beNumber' | translate }}</label>
                </li>
            </ng-container>
            <br>

            <br>
            <li class="mt-3">
                <label class="introduce">{{ 'SafetyAlarmUrl' | translate }}</label>
                <input class="input-url ml-1" type="text" formControlName="sUrl" (ngModelChange)="onContentTextChange($event, 'sUrl')">
            </li>
            <ng-container *ngIf="(sUrl.touched || sUrl.dirty)">
                <li *ngIf="sUrl.invalid && sUrl.errors.required">
                    <label class="alarm-tip">{{ 'SafetyAlarmUrl' | translate }}{{ 'isRequired' | translate }}</label>
                </li>
            </ng-container>
            <br>

            <li class="mt-3">
                <button class="blue-btn" (click)="onSubmit()" [disabled]="Form.invalid">{{'save' | translate}}</button>
            </li>
        </ul>
    </div>
</div>
